<template>
	<div>
		<van-nav-bar title="最新车辆" left-text="返回" left-arrow @click-left="onClickLeft" />
		<van-loading v-show="cars.length ==0?true:false" type="spinner" color="#1989fa" />
		<div class="car-list" v-for="(car,index) in cars" v-bind:key="index" style="display: flex; flex-direction: column;">
			<div style="display: flex; flex-direction: row;" @click="onCarDetail(car.carId)">
				<div>
					<van-image width="160px" height="100px" fit="contain" v-bind:src="car.titleImg" />
				</div>
				<div style="display: flex; flex-direction: column; justify-content: space-between">
					<p class="car-list-title">{{car.brand}} {{car.series}} {{car.years}} {{car.gearBox}} {{car.engine}}
						{{car.edition}}</p>
					<p class="car-list-info">{{car.licensingTime}}/{{car.tableMileage}}</p>
					<p class="car-list-price">{{car.totalPrice}} {{car.downPayment}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cars: []
			}
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			onCarDetail(carId) {
				this.$router.push({
					path: "/car/cardetail",
					query: {
						carId: carId
					}
				})
			}
		},
		mounted() {
			this.$axios({
				method: 'post',
				url: '/car/newCarPage'
			}).then((resp) => {
				if (resp.data.status == 200) {
					this.cars = resp.data.obj;
				} else {
					Notify({
						type: 'danger',
						message: '获取车辆失败'
					})
					this.$router.back()
				}
			})

		}
	}
</script>

<style scoped>
	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 10px 0px;
	}
</style>
